<script setup lang="ts">
import { Back } from '@element-plus/icons-vue'

const router = useRouter()
</script>

<template>
  <main>
    <img class="bg-icon" src="@/assets/images/404.svg" alt="">
    <div class="content">
      <h1
        un-text="gray-700"
        un-font-size="28px"
        un-m-b="4"
      >
        哎呀！未找到页面
      </h1>
      <h3
        un-font-500
        un-text="gray-500"
        un-font-size="16px"
        un-m-b="6"
      >
        抱歉，我们无法找到您要找的页面。
      </h3>
      <el-button
        type="primary"
        @click="router.back()"
      >
        <template #icon>
          <el-icon><Back /></el-icon>
        </template>
        返回首页
      </el-button>
    </div>
  </main>
</template>

<style scoped lang="scss">
main {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  .content {
    transform: translate(0, -5.5vh);
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .bg-icon {
    max-width: 500px;
    width: 80%;
    margin-top: 4vh;
  }
}
</style>
